<template>
  <div class="LoginContainer">
    <div class="imgContainer">
      <img src="../../public/Login/img/loginimg.png" alt="" />
    </div>
    <div class="formContainer">
      <div style="width: 60%">
        <div class="titleContainer">
          <img src="../../public/Login/img/logo.png" alt="" />
          <span class="title">冰糖教育</span>
        </div>
        <el-form :model="formLabelAlign" ref="formLabelAlign">
          <el-form-item
            prop="username"
            :width="250"
            :rules="[
              { required: true, message: '请输入用户名', trigger: 'blur' },
            ]"
          >
            <el-input
              v-model="formLabelAlign.username"
              class="input"
              placeholder="请输入用户名"
            >
              <i slot="prefix" class="el-input__icon el-icon-user"></i>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="password"
            :rules="[
              { required: true, message: '请输入密码', trigger: 'blur' },
            ]"
          >
            <el-input
              type="password"
              autocomplete="off"
              v-model="formLabelAlign.password"
              class="input"
              placeholder="请输入密码"
            >
              <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            </el-input>
          </el-form-item>
          <div class="functionContainer">
            <span @click="goLogin" class="register" style="cursor: pointer; color: #409eff; text-align: right"
              >没有账号？去注册</span
            >
          </div>
          <el-button
            type="primary"
            class="loginBtn"
            @click="submitForm('formLabelAlign')"
            >登录</el-button
          >
        </el-form>
      </div>
    </div>
  </div>
</template> 

<script>
export default {
  data() {
    return {
      count: 1,
      formLabelAlign: {
        username: "",
        password: "",
      },
      isMemory: false,
      isRemember: false,
    };
  },
  methods: {
    async submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let passEncryption = await this.Rsa.rsaPublicData(
            this.formLabelAlign.password
          );
          let result = await this.$axios.post("/login/submit", {
            username: this.formLabelAlign.username,
            password: passEncryption,
          });
          console.log(result, 'asdwad');
          if (result.code == 200) {
            localStorage.setItem("token", result.token);
            localStorage.setItem("refreshtoken", result.refreshToken);
            localStorage.setItem("userInfo", result.user_info);
            this.$router.push("/home");
          }
        } else {
          return false;
        }
      });
    },
    goLogin() {
      this.$router.push("/register");
    },
  },
  mounted() {
  }
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}

.imgContainer img {
  width: 584px;
  height: 550px;
}

.LoginContainer {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 100vh;
}

.formContainer {
  width: 510px;
  height: 400px;
  opacity: 1;
  border-radius: 18px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 12px 45px 0px rgba(0, 0, 0, 0.15),
    0px 0px 40.38px 0px rgba(255, 255, 255, 1),
    0px 0px 80.77px 0px rgba(255, 255, 255, 1),
    0px 0px 282.68px 0px rgba(255, 255, 255, 1),
    0px 0px 565.37px 0px rgba(255, 255, 255, 1),
    0px 0px 969.2px 0px rgba(255, 255, 255, 1),
    0px 0px 1696.1px 0px rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title {
  left: 18.99px;
  top: 0px;
  height: 53px;
  opacity: 1;
  font-size: 35px;
  font-weight: 400;
  letter-spacing: 0px;
  color: rgba(0, 0, 0, 1);
  text-align: left;
  vertical-align: top;
  letter-spacing: 4px;
  font-family: "JinShan";
  line-height: 53px;
}

.regiser {
  cursor: pointer; 
  color: #409eff; 
  text-align: left
}

.titleContainer {
  display: flex;
  justify-content: center;
  /* height: 53px; */
  overflow: hidden;
  margin-bottom: 40px;
}

.titleContainer img {
  width: 50px;
  margin-right: 20px;
}

.input {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.functionContainer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 10px;
}

.loginBtn {
  width: 100%;
  border-radius: 16px;
}
</style>
